<template>
    <!-- 波浪 -->
    <div>
        <svg
            class="waves"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 24 150 28"
            preserveAspectRatio="none"
            shape-rendering="auto"
        >
            <defs>
                <path
                    id="gentle-wave"
                    d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
                />
            </defs>
            <g class="parallax">
                <use
                    xlink:href="#gentle-wave"
                    x="48"
                    y="0"
                    class="wave-color-1"
                />
                <use
                    xlink:href="#gentle-wave"
                    x="48"
                    y="3"
                    class="wave-color-2"
                />
                <use
                    xlink:href="#gentle-wave"
                    x="48"
                    y="5"
                    class="wave-color-3"
                />
                <use
                    xlink:href="#gentle-wave"
                    x="48"
                    y="7"
                    class="wave-color-4"
                />
            </g>
        </svg>
    </div>
</template>

<script>
export default {
    name: "waves",
    data() {
        return {};
    },
    computed: {},
    methods: {},
};
</script>

<style lang="scss" scoped>
@use "../assets/css/waves.scss";
</style>
